<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>生成PPT</title>
        <style>
            body {
                font-family: "Microsoft YaHei", sans-serif;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100vh;
                background-color: #fafafa;
            }

            .container {
                width: 90%;
                max-width: 1200px;
                display: flex;
                flex-direction: column;
                padding: 20px;
                box-sizing: border-box;
            }

            .top-section {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                width: 100%;
                margin-bottom: 20px;
            }

            .input-area {
                width:85%; /* 让上方输入框宽度填满父容器 */
                height: 200px;
                border: 1px dashed #888;
                padding: 15px;
                border-radius: 10px;
                margin-right: 20px;
            }

            .button-group {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .editor-area {
                display: flex;
                width: 100%; /* 让下方输入框宽度填满父容器 */
                height: 500px;
                border: 1px dashed #888;
                padding: 15px;
                border-radius: 10px;
                margin-bottom: 20px;
            }

            .upload-area {
                width: 32%; /* 上传文件区域宽度 */
                height: 250px;
                border: 1px dashed #888;
                padding: 15px;
                border-radius: 10px;
                background-color: white;
            }

            .footer {
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }

            /* 禁止调整大小 */
            textarea {
                resize: none !important; /* 禁用调整大小 */
            }

            input[type="file"] {
                resize: none !important; /* 禁用调整大小 */
            }

            /* Flexbox for the first row */
            .first-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }

            .first-row .input-label {
                font-size: 16px;
                margin-right: 20px;
            }

            /* Adding the second row for the upload area */
            .second-row {
                display: flex;
                justify-content: space-between;
                width: 100%;
            }

            /* 按钮样式 */
            button {
                cursor: pointer;
                font-family: "Microsoft YaHei";
                background-color: white;
                border: 1px solid #888;
                color: black;
                padding: 5px 15px;
                margin: 10px;
                text-align: center;
                border-radius: 15px;
                font-size: 14px;
                display: inline-block;
                line-height: normal;
            }

            /* 按钮 hover 效果 */
            button:hover {
                background-color: #007bff;
                color: white;
            }

            /* 禁用按钮样式 */
            button:disabled {
                background-color: #f0f0f0;
                border-color: #ccc;
                color: #aaa;
                cursor: not-allowed;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- Top Section -->
            <div class="top-section">
                <!-- Input Textarea and Button -->
                <div class="input-area">
                    <textarea id="inputPPTText" placeholder="请输入PPT大纲内容..." style="width: 100%; height: 100%;"></textarea>
                </div>
                <div class="button-group">
                    <button id="generateOutlineBtn">生成大纲</button>
                    <button>选择模板</button>
                    <button>上传模板</button>
                </div>
            </div>

            <!-- Editor Section -->
            <div class="editor-area">
                <textarea id="editorOutlineText" placeholder="" style="width: 100%; height: 100%;" readonly></textarea>
                <div class="upload-area">
                    <label>上传文件：</label>
                    <input type="file" />
                </div>
            </div>

        </div>

        <!-- Footer Section -->
        <div class="footer">
            <button id="createPptBtn">生成PPT</button>
        </div>

        <script src="js/pptDemo.js">

        </script>
    </body>
</html>
